2021 iThome 鐵人賽

DAY 0

0

自我挑戰組

從零開始學習 JS 的連續-30 Days-系列第 19 篇

[Day 19]從零開始學習 JS 的連續-30 Days---data- 屬性

13th鐵人賽

2021-10-04 23:27:19

646 瀏覽

分享至

data- 屬性

data- 屬性 :
在 HTML 標籤中可以放入自創的屬性，目的是去綁定 DOM 與資料以及驗證資料。
語法:
data- + 自訂屬性名稱 = "值"。
例如：data-pets = "cat"、data-fruit = "apple"。
而若要撈出所有 data- 開頭屬性的值，使用 JS 選取 DOM，然後加上 .dataset 的語法在後面，用 console.log 去查就會得到一組物件。

如上圖所示 **data-**屬性應用。

資料初始化格式

先將HTML格式做出基本架構。
JS 設定 data 值。(假設值方便之後編寫程式。)
使用 function 功能搭配 forEach 迴圈組件資料。
使用 innerHTML 新增資料標籤。

今天就到這結束。

[Day 18]從零開始學習 JS 的連續-30 Days---網路請求POST

[Day 20]從零開始學習 JS 的連續-30 Days---todolist 待辦事項

系列文

從零開始學習 JS 的連續-30 Days- 共 30 篇

目錄

RSS系列文訂閱系列文

1 人訂閱

完整目錄

熱門推薦

{{ item.subject }}

{{ item.channelVendor }} | {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

902 組

團體組數

37 組

累計文章數

19850 篇

完賽人數

528 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 17th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# linux windows server css react

IT邦幫忙